Component
React.Component = Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. React.Component is provided by React. Overview React.Component is an abstract base class define at least a render() method. class Greeting extends React.Component { render() { return Hello, {this.props.name} ; } } '''The Component Lifecycle''' Methods prefixed with will are called right '''before''' something happens, and methods prefixed with did are called right '''after''' something happens. '''Mounting''' * '''constructor()''' constructor(props) The constructor for a React component is called '''before it is mounted.''' When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs. '''The constructor is the right place to initialize state.''' If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component. It's okay to initialize state based on props. This effectively "forks" the props and sets the state with the initial props. Here's an example of a valid React.Component subclass constructor: constructor(props) { super(props); this.state = { color: props.initialColor }; } * '''componentWillMount()''' is invoked immediately '''before mounting occurs'''. called before render(), therefore setting state synchronously in this method will not trigger a re-rendering. Avoid introducing any side-effects or subscriptions in this method. This is the only lifecycle hook called on server rendering. Generally, we recommend using the constructor() instead. * '''render()''' is required. should examine this.props and this.state and return a single React element a representation of a native DOM component, such as can also return null or false to indicate that you don't want anything rendered. When returning null or false, ReactDOM.findDOMNode(this) will return null. Note render() will not be invoked if shouldComponentUpdate() returns false. * '''componentDidMount()''' immediately after a component is mounted. Initialization that requires DOM nodes should go here. '''If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.''' '''Updating''' An update can be caused by changes to props or state. These methods are called when a component is being re-rendered: * '''componentWillReceiveProps()''' * '''shouldComponentUpdate()''' * '''componentWillUpdate()''' * '''render()''' * '''componentDidUpdate()''' '''Unmounting''' This method is called when a component is being removed from the DOM: * '''componentWillUnmount()''' '''Other APIs''' Each component also provides some other APIs: * '''setState()''' ** changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. ** the primary method you use to update the user interface in response to event handlers and server responses. ** setState() will always lead to a re-render unless shouldComponentUpdate() returns false. ** The first argument is an updater function with the signature: setState(updater, [callback]) ** (prevState, props) => stateChange ** prevState is a reference to the previous state ** suppose we wanted to increment a value in state by props.step: this.setState((prevState, props) => { return {counter: prevState.counter + props.step}; }); * '''forceUpdate()''' '''Class Properties''' * '''defaultProps''' * '''displayName''' '''Instance Properties''' * '''props''' * '''state'''